<template>
	<view>
		<view class="headBox">
			<view class="tt">选择感兴趣的内容</view>
			<view class="lineBox">
				<view class="line"></view>
				<text>根据兴趣，生成私人订制的找培训</text>
				<view class="line"></view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in classList" :key="index" @tap="tapClass(index)">
				<image mode="widthFix" :src="item.img"></image>
				<text>{{item.name}}</text>
				<!-- <text v-if="item.isSelect" class="gz">已关注</text> -->
				<text class="iconfont select" :class="[item.isSelect?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
				
			</view>
			
			
		</view>
		<view class="btmOp">
			<button :class="[selectCount<1?'':'active']" :disabled="selectCount<1" @tap="tijiao">{{selectCount<1?'至少选择1个兴趣':'立即体验'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectCount:0,
				classList:[],
				selectArr:[],
			};
		},
		methods:{
			tapClass(e){
				
				let _idx=parseInt(e);
				this.classList[_idx].isSelect=!this.classList[_idx].isSelect
				this.getCount();
			},
			getCount(){
				let _count=0
				let _arr=[];
				this.classList.forEach((x,i)=>{
					if(x.isSelect){
						_count+=1
						_arr.push(x.categoryId)
					}
				})
				this.selectCount=_count;
				this.selectArr=_arr;
			},
			tijiao(){
				uni.setStorageSync("xinqu",this.selectArr);
				this.toPage({
					url:'index'
				})
			},
			getData(){
				this.$store.dispatch("apiGetInterest").then(res=>{
					console.log(res);
					res.data.data.forEach((x)=>{
						let r=x;
						r.isSelect=false;
						this.classList.push(r);
					})
					this.getCount();
				})
			}
		},
		onLoad(){
			this.getData()
		}
	}
</script>

<style lang="less" >
	page{
		background-color: #f4f4f4;
	}
	.headBox{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		height: 300upx;
		align-items: center;
		justify-content: center;
		.tt{
			font-size: 40upx;
			font-weight: bold;
			color: #07080d;
			margin-bottom: 20upx;
		}
		.lineBox{
			display: flex;
			align-items: center;
			width: 100%;
			.line{
				flex: 1;
				height: 1px;
				background-color: #cacaca;
			}
			text{
				font-size: 28upx;
				color: #6c6c6c;
				margin: 0 20upx;
			}
		}
		
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 26upx 32upx 140upx 32upx;
		.item{
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20upx;
			position: relative;
			image{
				width: 90%;
				margin-bottom: 10upx;
			}
			text{
				font-size: 32upx;
				text-align: center;
			}
			.gz{
				position: absolute;
				top: 0;
				left: 0;
				height: 40upx;
				line-height: 40upx;
				border-bottom-right-radius: 20upx;
				background-color: #FF0000;
				color: #FFFFFF;
				font-size: 24upx;
				padding: 0 20upx;
			}
			.select{
				position: absolute;
				font-size: 40upx;
				top: 10upx;
				right: 20upx;
				z-index: 1;
				color: #FFFFFF;
			}
			.icon-yuanxingxuanzhongfill{
				color: #ffb423;
			}
		}
	}
	.btmOp{
		position: fixed;
		width: 100%;
		height: 140upx;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 100upx;
		z-index: 9;
		button{
			margin: 0;
			width: 100%;
			height: 80upx;
			border-radius: 80upx;
			line-height: 80upx;
			border: none;
			background-color: #c8c8c8;
			color: #FFFFFF;
			font-size: 32upx;
		}
		button:after{
			border: none;
			outline: none;
		}
		.active{
			background-color: #ffb423;
		}
	}
</style>
